<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>林序</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}
    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <link rel="icon" type="image/png" href="{{ url_for('static',filename='images/tree.png') }}">
    <style>
        :root {
            --primary-color: #2E7D32;
            --secondary-color: #81C784;
            --accent-color: #DCEDC8;
            --text-color: #212121;
            --light-text: #757575;
            --sidebar-width: 220px;
            --header-height: 115px; /* 增大标题栏高度 */
        }

        body {
            background-color: #F5F5F5;
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
            min-height: 100vh;
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            height: 100vh; /* 确保body占据整个视口高度 */
            overflow: hidden; /* 防止滚动条出现导致高度计算问题 */
        }

        html {
            height: 100%; /* 确保html元素占据全部高度 */
            overflow: hidden; /* 防止滚动条出现导致高度计算问题 */
        }

        .header-container {
            width: 100%;
            background: linear-gradient(90deg, #1B5E20, #2E7D32, #388E3C);
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
            padding: 0;
            margin: 0;
            position: relative;
            z-index: 100;
            height: var(--header-height);
            flex-shrink: 0; /* 防止header在flex布局中被压缩 */
        }

        /* 修改header-content宽度为100%并减少左侧padding */
        .header-content {
            width: 100%;
            margin: 0 auto;
            padding-top:1rem;
            padding-left:1rem;
            padding-right:3rem;
            display: flex;
            align-items: flex-start; /* 顶部对齐 */
            justify-content: space-between;
            height: 100%;
        }

        /* 修改标题容器样式，移除左侧margin */
        .title-container {
            display: flex;
            align-items: center;
            flex-direction: row;
            margin-left: 0; /* 移除左侧margin */
        }

        /* 修改标题wrapper样式，减少左侧margin */
        .title-wrapper {
            display: flex;
            flex-direction: column;
            margin-left: 0.5rem; /* 减少左侧margin */
        }

        /* 保持Logo样式不变 */
        .header-logo {
            height: 100px;
            width: 100px;
            background-color: rgba(255, 255, 255, 0.95);
            padding: 5px;
            border-radius: 50%;
            object-fit: contain;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
            position:relative;
            top:-8px;
        }

        /* 保持主标题样式不变 */
        .header-title {
            color: #FFFFFF;
            font-size: 2rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
            letter-spacing: 1px;
        }

        /* 保持副标题样式不变 */
        .header-slogan {
            color: #E8F5E9;
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 2px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            margin-top: 0.2rem;
            padding-left: 0.2rem;
        }

        .user-info {
            display: flex;
            align-items: center;
            color: white;
            height: 100%;
            position: relative;
            top: -0.5rem;
        }

        .user-name {
            margin-right: 1rem;
            font-weight: 500;
            font-size: 20px;
        }

        .logout-btn {
            color: white;
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
            color: white;
        }

        /* 修复主区域和侧边栏的布局 */
        .content-wrapper {
            display: flex;
            flex: 1;
            position: relative;
            height: calc(100vh - var(--header-height));
            min-height: 0; /* 确保flex子元素可以正确计算高度 */
            overflow: hidden; /* 防止内容溢出 */
        }

        .sidebar {
            position: relative;
            width: var(--sidebar-width);
            background-color: white;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            padding: 1.5rem 0;
            z-index: 99;
            height: 100%;
            overflow-y: auto;
            flex-shrink: 0; /* 防止sidebar在flex布局中被压缩 */
        }

        .menu-title {
            padding: 0.7rem 1.5rem;
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-color);
            border-bottom: 1px solid #eee;
            margin-bottom: 1rem;
        }

        .menu-item {
            padding: 0.7rem 1.5rem;
            display: flex;
            align-items: center;
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
            cursor: pointer;
        }

        .menu-item.active {
            background-color: var(--accent-color);
            color: var(--primary-color);
            border-left: 4px solid var(--secondary-color);
            font-weight: 500;
        }

        .menu-item:hover {
            background-color: #f0f0f0;
            color: var(--primary-color);
        }

        .menu-icon {
            margin-right: 0.8rem;
            font-size: 1.2rem;
        }

        /* 添加子菜单样式 */
        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background-color: #f9f9f9;
        }

        .submenu.show {
            max-height: 200px; /* 足够容纳子菜单项的高度 */
        }

        .submenu-item {
            padding: 0.5rem 1.5rem 0.5rem 3.5rem;
            display: block;
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .submenu-item:hover {
            background-color: #f0f0f0;
            color: var(--primary-color);
        }

        .submenu-item.active {
            color: var(--primary-color);
            font-weight: 500;
        }

        /* 添加子菜单指示器 */
        .has-submenu {
            position: relative;
        }

        .submenu-indicator {
            position: absolute;
            right: 1.5rem;
            transition: transform 0.3s ease;
        }

        .has-submenu.open .submenu-indicator {
            transform: rotate(90deg);
        }

        .main-content {
            flex: 1;
            padding: 0;
            overflow: hidden;
            position: relative;
            height: 100%;
            display: flex; /* 使main-content成为flex容器 */
            flex-direction: column; /* 纵向排列子元素 */
        }

        #content-frame {
            width: 100%;
            height: 100%;
            border: none;
            flex: 1; /* 让iframe填充剩余空间 */
            display: block; /* 确保iframe正确显示 */
            min-height: 0; /* 确保iframe可以被正确计算高度 */
        }

        .animated-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(120deg, #e0f7fa, #e8f5e9, #f1f8e9);
            background-size: 300% 300%;
            animation: gradientShift 15s ease infinite;
        }

        @keyframes gradientShift {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }

        @media (max-width: 991.98px) {
            .sidebar {
                position: fixed;
                top: var(--header-height);
                left: 0;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                height: calc(100vh - var(--header-height));
                min-height: auto;
                overflow-y: auto;
                z-index: 1000;
            }

            .sidebar.show {
                transform: translateX(0);
                width: 250px;
            }

            .toggle-sidebar {
                display: block;
                position: fixed;
                bottom: 1rem;
                right: 1rem;
                width: 45px;
                height: 45px;
                background-color: var(--primary-color);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                z-index: 1000;
                border: none;
            }
        }

        @media (max-width: 767.98px) {
            .header-content {
                flex-direction: column;
                justify-content: center;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }

            .header-container {
                height: auto;
            }

            :root {
                --header-height: 140px;
            }

            .header-title {
                font-size: 1.6rem;
            }

            .header-slogan {
                font-size: 0.9rem;
                letter-spacing: 1px;
            }

            .user-info {
                margin-top: 0.5rem;
            }

            .header-logo {
                height: 50px;
                width: 50px;
            }
        }
        @media (max-width: 767.98px) {
            :root {
                --header-height: 160px; /* 增大移动端标题栏高度 */
            }

            .header-content {
                padding-top: 1.5rem; /* 增加移动端顶部内边距 */
            }
        }
    </style>
</head>
<body>
    <div class="animated-bg"></div>

    <!-- 标题栏 -->
    <header class="header-container">
        <div class="header-content">
            <div class="title-container">
                <img src="{{ url_for('static',filename='images/logo_1.png') }}" alt="logo" class="header-logo">
                <div class="title-wrapper">
                    <h1 class="header-title">林序3PG模型可视化系统</h1>
                    <p class="header-slogan">精算生态&nbsp;&nbsp;智绘林颜</p>
                </div>
            </div>
            <!-- 用户信息和登出按钮 -->
            <div class="user-info">
                <span class="user-name"><i class="bi bi-person-circle"></i> {{ g.user.username }}</span>
                <a href="#" class="logout-btn"><i class="bi bi-box-arrow-right"></i> 退出登录</a>
            </div>
        </div>
    </header>

    <!-- 改进内容区布局 -->
    <div class="content-wrapper">
        <!-- 侧边栏菜单 -->
        <aside class="sidebar">
            <div class="menu-title">功能菜单</div>
            <a href="#" class="menu-item active" data-page="project">
                <i class="bi bi-folder2-open menu-icon"></i>
                项目
            </a>
            <div class="menu-item has-submenu" data-page="data">
                <i class="bi bi-database menu-icon"></i>
                数据
                <i class="bi bi-chevron-right submenu-indicator"></i>
            </div>
            <div class="submenu">
                <a href="#" class="submenu-item" data-page="tree-params">
                    树种参数
                </a>
                <a href="#" class="submenu-item" data-page="climate-data">
                    气候数据
                </a>
            </div>
            <a href="#" class="menu-item" data-page="help">
                <i class="bi bi-question-circle menu-icon"></i>
                帮助
            </a>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <iframe id="content-frame" src="" width="100%" frameborder="0"></iframe>
        </main>
    </div>

    <!-- 移动端侧边栏切换按钮 -->
    <button class="toggle-sidebar d-lg-none">
        <i class="bi bi-list"></i>
    </button>

    <script>
        $(document).ready(function() {
            // 设置iframe的初始src
            $("#content-frame").attr("src", "{{ url_for('func.myprojects') }}");

            // 移动端适配
            $(".toggle-sidebar").click(function() {
                $(".sidebar").toggleClass("show");
            });

            // 点击菜单项激活状态切换并加载相应页面
            $(".menu-item:not(.has-submenu)").click(function(e) {
                e.preventDefault();
                $(".menu-item, .submenu-item").removeClass("active");
                $(this).addClass("active");

                // 获取要加载的页面
                const page = $(this).data("page");
                var pagesrc;
                if(page === "project") pagesrc = "{{ url_for('func.myprojects') }}";
                else if(page === "help") pagesrc = "{{ url_for('func.gethelp') }}"
                else pagesrc = '';

                // 更新iframe的src
                $("#content-frame").attr("src", pagesrc);
            });

            // 点击子菜单项
            $(".submenu-item").click(function(e) {
                e.preventDefault();
                $(".menu-item, .submenu-item").removeClass("active");
                $(this).addClass("active");
                $(this).closest(".submenu").prev(".has-submenu").addClass("active");

                // 获取要加载的页面
                const page = $(this).data("page");
                var pagesrc;
                if(page === "tree-params") pagesrc = "{{ url_for('func.myspecies') }}";
                else if(page === "climate-data") pagesrc = "{{ url_for('func.mysites') }}"
                else pagesrc = '';
                // 更新iframe的src
                $("#content-frame").attr("src", pagesrc);
            });

            // 处理有子菜单的菜单项
            $(".has-submenu").click(function(e) {
                e.preventDefault();

                // 切换子菜单显示状态
                $(this).toggleClass("open");
                $(this).next(".submenu").toggleClass("show");

                // 如果没有子菜单项处于活跃状态，则激活该菜单项
                if ($(this).next(".submenu").find(".submenu-item.active").length === 0) {
                    $(".menu-item, .submenu-item").removeClass("active");
                    $(this).addClass("active");

                    // 激活第一个子菜单项
                    $(this).next(".submenu").find(".submenu-item").first().addClass("active");
                }
            });

            // 退出登录按钮点击事件
            $(".logout-btn").click(function(e) {
                e.preventDefault();
                if(confirm("未保存的操作和数据将无法复原，确定要退出登录吗？")) {
                    window.location.href = "{{ url_for('auth.logout') }}";
                }
            });

            // 展开数据子菜单
            $(".sidebar .has-submenu").addClass("open");
            $(".sidebar .submenu").addClass("show");
        });
    </script>
</body>
</html>